<template>
  <div>
    <header class="header">
      <div>left</div>
      <div>center</div>
      <div>right</div>
    </header>

    <hr />

    <!-- 全局大小和主题切换 -->
    <div>
      <button @click="changeSize(36)">大</button>
      <button @click="changeSize(24)">中</button>
      <button @click="changeSize(12)">小</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const changeSize = (size: number) => {
  document.documentElement.style.setProperty("--size", `${size}vpx`);
};
</script>

<style scoped lang="scss">
:root {
  --size: 12vpx;
}

.header {
  display: flex;

  div {
    height: 50vpx;
    line-height: 50px;
    color: #fff;
    text-align: center;
    /* 给你想做全局的字体大小添加这个变量就可以了 var(--size) */
    font-size: var(--size);
  }

  div:nth-child(1) {
    width: 100vpx;
    background-color: #f00;
  }

  div:nth-child(2) {
    flex: 1;
    background-color: #0f0;
  }

  div:nth-child(3) {
    width: 100vpx;
    background-color: #00f;
  }
}
</style>
